<template>
	<view class="content">
		<view class="bg"></view>
		<view class="bg2"></view>
		<view class="tips">
			<text class="title">授权手机号</text>
			<text class="subtitle">登录后享受更好的服务体验~</text>
		</view>
		<view class="form-box">
			<!-- #ifdef MP-WEIXIN -->
			<button class="btn" v-if="!is_checked" @click="showTips">授权手机号</button>
			<button v-else-if="is_checked && !hasUser" class="btn" open-type="getPhoneNumber"
				@getphonenumber="getPhoneNumber">授权手机号</button>
			<button v-else-if="is_checked && hasUser" class="btn" @click="loginApi()">授权登录</button>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<button class="btn">请在小程序环境授权</button>
			<!-- #endif -->

		</view>
		<view class="fot">
			<label @click="changeTips">
				<checkbox :checked="is_checked" />
				<view class="checkview">
					阅读并同意我们的<text @click.stop="toPage('/pages/message/policy?type=user')">《用户协议》</text>以及<text
						@click.stop="toPage('/pages/message/policy?type=privacy')">《隐私协议》</text>
				</view>
			</label>
		</view>
	</view>
</template>

<script>
	import {
		mpLogin,
		getMpUserOpenid
	} from "@/api/api.js"
	export default {
		data() {
			return {
				hasUser: false,
				phoneNumber: '',
				token: '',
				invite: '',
				open_id: '',
				is_checked: false,
			}
		},
		onLoad(e) {
			let scene = decodeURIComponent(e.scene)
			let param = this.getUrlParams(scene)
			if (param.invite) {
				this.invite = e.invite
			}
			this.getMpOpenid()
		},
		methods: {
			showTips() {
				uni.$showMsg('请阅读并同意协议')
			},
			changeTips() {
				this.is_checked = !this.is_checked
			},
			getMpOpenid() {
				var that = this
				// #ifdef MP-WEIXIN
				uni.login({
					success(res) {
						getMpUserOpenid({
							code: res.code
						}).then(data => {
							that.open_id = data.data.openid
							that.hasUser = data.data.hasUser
						})
					}
				})
				// #endif
			},
			getPhoneNumber(e) {
				// #ifdef MP-WEIXIN
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					let encryptedData = e.detail.encryptedData
					let errMsg = e.detail.errMsg
					let iv = e.detail.iv
					let code = e.detail.code
					this.loginApi(code)
				}
				// #endif
			},
			loginApi(code = '') {
				mpLogin({
					openid: this.open_id,
					code: code,
					invite: this.invite
				}).then(res => {
					if (res.code == 0) {
						let data = res.data
						uni.setStorageSync('tokens', data.token)
						uni.switchTab({
							url: '/pages/user/index'
						})
					} else {
						uni.$showMsg(res.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
		background-color: #ffffff;

		.tips {
			padding-top: 200rpx;
			padding-left: 80rpx;
			display: flex;
			flex-direction: column;

			.title {
				line-height: 70rpx;
				font-weight: bold;
				font-size: 50rpx;
			}

			.subtitle {
				line-height: 70rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #b0b0b1;
			}

		}

		.bg {
			position: fixed;
			top: -250rpx;
			right: -250rpx;
			width: 600rpx;
			height: 600rpx;
			border-radius: 100%;
			background-color: $uni-bg-color;
			z-index: 2
		}

		.bg2 {
			position: fixed;
			top: -150rpx;
			right: -300rpx;
			width: 600rpx;
			height: 600rpx;
			border-radius: 100%;
			background-color: $uni-bg-color-7;
			z-index: 1;
		}

		.form-box {
			padding-top: 180rpx;
			padding-left: 70rpx;
			width: 610rpx;

			.input-box {
				margin: 40rpx 0;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: 100rpx;
				background-color: #f5f5f5;
				border-radius: 100rpx;
				width: 100%;

				input {
					flex: 1;
					height: 100%;
					font-size: 30rpx;
				}

				.left {
					padding: 0 30rpx;
					width: 35rpx;
					height: 35rpx;
				}

				.right {
					padding: 0 30rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}

			.btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100rpx;
				border-radius: 100rpx;
				color: #FFFFFF;
				margin-top: 10vh;
				background: linear-gradient(to right, $uni-bg-color, $uni-bg-color-7);
			}

			.btn2 {
				border: 1px solid #55aaff;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100rpx;
				border-radius: 100rpx;
				color: #55aaff;
				margin-top: 2vh;
			}

			.other {
				display: flex;
				justify-content: space-between;

				text {
					line-height: 80rpx;
					font-size: 28rpx;
				}
			}
		}
	}

	.fot {
		width: 85%;
		margin: 0 auto;

		label {
			display: flex;
			align-items: flex-start;
			font-size: 14px;

			/* #ifndef H5 */
			checkbox {
				transform: scale(.8);
			}

			/* #endif */
			.checkview {
				text-align: center;
				color: #A6A6A6;
				line-height: 22px;

				text {
					color: $uni-bg-color;
				}
			}
		}
	}
</style>